<template>
    <div class="fourlevellinkage">
        <Select
            class="w-select"
            :clearable="!provinceStatus && mode !== 'review' && !authTimeDisabled"
            :value="Number(province)"
            :disabled="provinceStatus || mode === 'review' || authTimeDisabled"
            v-if="!provinceStatus && mode !== 'review'"
            placeholder="省"
            @on-change="changeProvince"
        >
            <Option v-for="item in provinceList" :value="item.id" :key="item.id" style='text-align:center'>{{item.name}}</Option>
        </Select>
        <Select
            class="w-select"
            :clearable="!cityStatus && mode !== 'review' && !authTimeDisabled"
            :disabled="cityStatus || mode === 'review'|| authTimeDisabled"
            v-if="!cityStatus && mode !== 'review'"
            :value="Number(city)"
            placeholder="市"
            @on-change="changeCity"
        >
            <Option v-for="item in cityList" :value="item.id" :key="item.id" style='text-align:center'>{{item.name}}</Option>
        </Select>
        <Select
            class="w-select"
            :clearable="!areaStatus && mode !== 'review' && !authTimeDisabled"
            :disabled="areaStatus || mode === 'review'|| authTimeDisabled"
            v-if="!areaStatus && mode !== 'review'"
            :value="Number(area)"
            placeholder="区"
            @on-change="changeArea"
        >
            <Option v-for="item in areaList" :value="item.id" :key="item.id" style='text-align:center'>{{item.name}}</Option>
        </Select>
        <!-- Number(hospital) -->
        <Select
            class="w-select-hos"
            :clearable="!hospitalStatus && mode !== 'review' && !authTimeDisabled"
            :disabled="hospitalStatus || mode === 'review'|| authTimeDisabled"
            v-if="!hospitalStatus && mode !== 'review'"
            :value="hospital"
            placeholder="机构"
            @on-change="changeHospital"
        >
            <Option v-for="item in hospitalList" :value="item.id" :key="item.id" style='text-align:center'>{{item.name}}</Option>
        </Select>
    </div>
</template>
<script>
import cookie from "./../utils/cookie.js";
import api from "@/api/commonApi";
import Utils from "@/utils";
export default {
    data() {
        return {
            jgType: false,
            provinceList: [],
            cityList: [],
            areaList: [],
            hospitalList: [],
            authTimeDisabled:false,
            provinceStatus: false,
            cityStatus: false,
            areaStatus: false,
            hospitalStatus: false
        };
    },
    props: {
        authTimeDisabled: {
            default: null
        },
        province: {
            default: null
        },
        city: {
            default: null
        },
        area: {
            default: null
        },
        jgType: {
            default: null
        },
        hospital: {
            default: null
        },
        isBack: {
            default: 1
        },
        hospitalType: {
            default: null // 机构类型:1医院 2药店 3药企
        },
        mode: {
            default: 'edit' // review 查看态 edit 编辑态
        }
    },
    created() {
        this.provinceList = this.$store.getters.getProvinceList;
        this.debounceHospitalselectbyprovincecode = Utils.debounce(this.hospitalselectbyprovincecode);
        //实际上不管是那种分类的账号，都要先将省级列表查询出来
        if (this.isBack == 1) { // 首次加载页面而不是从其他页面返回的页面
            this.authConfig();
        }else if(this.isBack == 2){ //这是从其他页面返回的话，携带有默认值
            //设置从其他页面返回后默认值
            this.authConfig();
            this.provinceList = this.$store.getters.getProvinceList;
            if (this.province) {
                this.cityList = this.$store.getters.getCityList(this.province);
                if (this.city) {
                    this.areaList = this.$store.getters.getAreaList(this.city);
                    if (this.area) {
                        this.debounceHospitalselectbyprovincecode(this.area);
                    }
                }
            }
        }
        console.log(this.mode)
    },
    methods: {
        changeProvince(val) {
            val = val ? val : null;
            this.$emit("changeProvince", val);
            this.$emit("changeCity", null);
            this.$emit("changeArea", null);
            this.$emit("changeHospital", null);
            this.city = null;
            this.area = null;
            this.hospital = null;
            this.hospitalList = [];
            this.cityList = this.$store.getters.getCityList(val);
        },
        changeCity(val) {
            val = val ? val : null;
            this.$emit("changeCity", val);
            this.$emit("changeArea", null);
            this.$emit("changeHospital", null);
            this.area = null;
            this.hospital = null;
            this.hospitalList = [];
            this.areaList = this.$store.getters.getAreaList(val);
        },
        changeArea(val) {
            val = val ? val : null;
            this.$emit("changeArea", val);
            this.$emit("changeHospital", null);
            this.hospital = null;
            this.hospitalList = [];
            if (val) {
                this.debounceHospitalselectbyprovincecode(val);
            }
        },
        changeHospital(val) {
            val = val ? val : null;
            if(this.hospitalList) {
                this.hospitalList.forEach(i =>{
                    if(i.id == val) {
                        sessionStorage.setItem("orgCode",i.orgCode)
                    }
                })
            }
            this.$emit("changeHospital", val);
        },
        hospitalselectbyprovincecode(districtCode) {
            let url = api.findHospitalListByProvinceCode;
            if(this.jgType){
                url = api.findSuperviseHospitalList;
            }
            var params = {};
            params.provinceCode = parseInt(this.province);
            params.cityCode = parseInt(this.city);
            params.districtCode = parseInt(districtCode);
            // params.hospitalType = 1;
            this.hospitalType && (params.hospitalType = this.hospitalType);
            // console.log(JSON.stringify(params));
            this.$axios
            .post(url, params)
            .then(resp => {
                if(resp.data.code == 1){
                    let list = resp.data.object;
                    const hospitalList = [];
                    list.map((el, i) => {
                        let tmpObj = {};
                        // tmpObj.id = parseInt(el.id);
                        tmpObj.id = el.id;
                        tmpObj.name = el.orgName;
                        tmpObj.orgCode = el.orgCode;
                        hospitalList.push(tmpObj);
                    });
                    this.hospitalList = hospitalList;
                    this.$forceUpdate();
                } else {
                    this.hospitalList = []
                }               
            })
            .catch(err => {
                console.log(err);
            });
        },
        authConfig() {
            this.identity = cookie.getCookie("idtt");
            this.identityCoding = cookie.getCookie("idttC");
            this.ownArea = JSON.parse(cookie.getCookie("ownArea"));
            this.userIsYq = JSON.parse(cookie.getCookie("userIsYq"));
            // 药企不需要有默认状态
            if (!this.userIsYq) {
                // 输入框默认状态配置
                if (this.ownArea.province) {
                    // this.provinceList.push(this.ownArea.province);
                    this.province = this.ownArea.province.id;
                    this.provinceStatus = true;
                }
                if (this.ownArea.city) {
                    // this.cityList.push(this.ownArea.city);
                    this.city = this.ownArea.city.id;
                    this.cityStatus = true;
                }
                if (this.ownArea.area) {
                    // this.areaList.push(this.ownArea.area);
                    this.area = this.ownArea.area.id;
                    this.areaStatus = true;
                }
              
                // 不同权限账户对应不同的默认状态
                this.cityList = this.$store.getters.getCityList(this.province) || [];
                this.areaList = this.$store.getters.getAreaList(this.city) || [];

                if (this.identity == 1) {
                    this.provinceList = this.$store.getters.getProvinceList;
                } else if (this.identity == 2) {
                    this.cityList = this.$store.getters.getCityList(this.province);
                    this.$emit("changeProvince", this.province);
                } else if (this.identity == 3) {
                    this.areaList = this.$store.getters.getAreaList(this.city);
                    this.$emit("changeProvince", this.province);
                    this.$emit("changeCity", this.city);
                } else if (this.identity == 4) {
                    this.debounceHospitalselectbyprovincecode(this.area);
                    this.$emit("changeProvince", this.province);
                    this.$emit("changeCity", this.city);
                    this.$emit("changeArea", this.area);
                } else if (this.identity == 5) {
                    this.hospital = Number(this.identityCoding);
                    this.hospitalStatus = true;
                    this.$emit("changeProvince", this.province);
                    this.$emit("changeCity", this.city);
                    this.$emit("changeArea", this.area);
                    this.$emit("changeHospital", this.hospital);
                }
            }
        }
    },
    watch: {
       province(val) {
            this.cityList = this.$store.getters.getCityList(val);
       },
       city(val) {
            this.areaList = this.$store.getters.getAreaList(val);
       },
       area(val) {
           if (val && this.province && this.city) {
                this.debounceHospitalselectbyprovincecode(val);
            }
       }
    },
};
</script>
<style lang="less" scoped>
.fourlevellinkage {
    display: inline-block;
    .w-select {
        width: 100px;
    }
    .w-select-hos {
        width: 180px;
    }
}
</style>
